<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="glyphicon glyphicon-menu-left nav-back-btn" onclick="router.back()"></span>
          </div>
          <div class="header-nav-title">
            <h2 class="flex-1 font-size-normal text-align-center">Modify information</h2>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <!-- 用户信息 -->
        <div class="bg-regular">
          <div class="flex-column align-center justify-center padding-y-20">
            <div class="position-relative margin-bottom-10">
              <img class="width-height-75 radius-round img-cover" src="./images/ball_park.png" alt="" srcset="" />
              <img class="width-height-20 position-absolute-rightBottom" src="./images/switch_icon.png" alt="" srcset="" />
            </div>
            <span class="font-size-big">Alxe</span>
          </div>
        </div>

        <div class="bg-regular margin-top-10">
          <div class="flex-column padding-x-15">
            <div class="justify-between align-center padding-y-20 border-bottom-base">
              <div>Gender</div>
              <div class="align-center">
                <span class="margin-right-5">Secret</span>
                <span class="glyphicon glyphicon-menu-right text-color-regular"></span>
              </div>
            </div>
            <div class="justify-between align-center padding-y-20">
              <div>Country/Area</div>
              <div class="align-center">
                <span class="margin-right-5">China</span>
                <span class="glyphicon glyphicon-menu-right text-color-regular"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-regular margin-top-10">
          <div class="flex-column padding-x-15">
            <div class="justify-between align-center padding-y-20 border-bottom-base">
              <div>Connect to Facebook</div>
              <div class="align-center">
                <span class="glyphicon glyphicon-menu-right text-color-regular"></span>
              </div>
            </div>
            <div class="justify-between align-center padding-y-20 border-bottom-base">
              <div>Connect to Twitter</div>
              <div class="align-center">
                <span class="glyphicon glyphicon-menu-right text-color-regular"></span>
              </div>
            </div>
            <div class="justify-between align-center padding-y-20">
              <div>Connect to Google</div>
              <div class="align-center">
                <span class="glyphicon glyphicon-menu-right text-color-regular"></span>
              </div>
            </div>
          </div>
        </div>

        <!-- 退出 -->
        <div class="padding-20">
          <a class="display-block full-width bg-regular padding-15 text-align-center radius-xl" href="login.html">
            <span class="text-red">Log out</span>
          </a>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
  </body>
</html>
